<template>
  <div>
    <section id="wrapper">
      <div class="login-main">
        <div id="login">
          <h2 class="login-title">{{ this.$company.name }}管理平台</h2>
          <el-form
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            @keyup.enter.native="dataFormSubmit()"
            status-icon
            style="width: 350px"
          >
            <el-form-item prop="userName">
              <el-input
                v-model="dataForm.userName"
                placeholder="帐号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="dataForm.password"
                type="password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login-btn-submit"
                type="primary"
                @click="dataFormSubmit()"
                >登录
              </el-button>
            </el-form-item>
          </el-form>
          <div class="logbanquan">
            版权所有：广东省云禾智能科技发展有限公司  粤ICP备2021147417号   电脑版 | 手机版
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
// import { mapMutations } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      // 设置账号密码的默认值
      dataForm: {
        userName: "",
        password: "",
      },
      // 账号密码的提示框
      dataRule: {
        userName: [
          { required: true, message: "帐号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
      // captchaPath: "",
    };
  },

  methods: {
    // 提交表单，登录
    dataFormSubmit() {
      // 验证账号密码是否用过，当通过，valid为true
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.login();
        }
      });
    },
    //  登录的验证
    login() {
      // 拿到用户输入的账号和密码
      let data = {
        login_name: this.dataForm.userName,
        password: this.dataForm.password,
      };
      axios({
        method: "POST",
        url: this.$company.login_httpUrl,
        data: data,
      })
        .then((sucRes) => {
          var res = sucRes.data;
          if (res.code == 0) {
            //登录成功时执行
            // 将登录的信息更新到vuex与 本地储存中
            const userInfo = res.result;
            console.log(555, userInfo, userInfo.token);
            let token = userInfo.token;
            delete userInfo.token;
            userInfo["roles"] = "agency";
            this.$store.commit("setUserInfo", userInfo);
            this.$store.commit("set_token", token);
            sessionStorage.setItem("token", token);
            sessionStorage.setItem("userInfo", JSON.stringify(userInfo));

            // 登录成功提示消息
            setTimeout(() => {
              this.$router.push({
                name: "deviceManage-deviceList",
              });
            }, 300);
            this.$message.success("登录成功");
          }
          // 如果状态码不为0，就提示错误信息
          else if (res.code == 20000) {
            this.$message.error(res.msg); // 用户名或密码错误
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          //如果执行失败，就执行这里
          // 用if else 区分判断失败返回的信息，再分别进行提示
          let { message } = err;
          let err_message = message;
          if (err_message == "Network Error") {
            message = "后端接口连接异常";
          } else if (err_message.includes("timeout")) {
            message = "系统接口请求超时";
          } else if (err_message.includes("Request failed with status code")) {
            message =
              "系统接口" + err_message.substr(err_message.length - 3) + "异常";
          }
          this.$message.error(message);
        });
    },
  },
};
</script>

<style scoped lang="scss">
#wrapper {
  width: 100vw;
  height: 100vh;
  background-image: url(~@/assets/img/background4.jpeg);
}

.login-main {
  width: 420px;
  height: 450px;
  display: flex;
  position: relative;
  left: calc(50% - 210px);
  top: 180px;
}

#logo {
  width: 420px;
  height: 450px;
  position: relative;

  .shadow {
    position: absolute;
    width: 420px;
    height: 450px;
    background-color: rgba(0, 121, 254, 0.8);
    left: 0px;
    top: 0px;
  }

  .logo {
    position: absolute;
    width: 420px;
    height: 450px;
    z-index: 1;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;

    img {
      width: 115px;
      height: 115px;
    }

    .zn {
      margin-top: 30px;
    }

    .en {
      margin-top: 6px;
      font-size: 20px;
      font-weight: 410;
    }
  }
}

#login {
  background: #fff;
  width: 420px;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }

  .login-title {
    font-size: 20px;
    color: rgb(34, 209, 222);
    margin-bottom: 30px;
  }

  .logbanquan {
    margin: 10px 0px 0px 36px;
    font-weight: 500;
    color: rgb(73, 66, 130);
    line-height: 20px;
    font-size: 14px;
  }

  .login-captcha {
    overflow: hidden;

    > img {
      width: 100%;
      cursor: pointer;
    }
  }

  .login-btn-submit {
    width: 100%;
    margin-top: 20px;
  }
}
</style>
